<template>
  <div class="detail-component">
	  <fieldset class="fieldset">培训基本信息</fieldset>
	  <div class="item">
	  	<span class="label">培训标题</span>
	  	<span class="value">{{detailData.title}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">主讲人</span>
	  	<span class="value">{{detailData.speaker}}</span>
	  </div>
	  <div class="item">
		  <span class="label">培训状态</span>
		  <span class="value">{{detailData.statusName}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">开始时间</span>
	  	<span class="value">{{detailData.startTime}}</span>
	  </div>
	  <div class="item">
		  <span class="label">结束时间</span>
		  <span class="value">{{detailData.endTime}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">培训地点</span>
	  	<span class="value">{{detailData.place}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">培训对象</span>
	  	<span class="value">{{detailData.trainers}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">考核方式</span>
	  	<span class="value">{{detailData.evalModeName}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">创建时间</span>
	  	<span class="value">{{detailData.createTime}}</span>
	  </div>
	  <div class="item" v-if="detailData.status!=0">
	  	<span class="label">下发时间</span>
	  	<span class="value">{{detailData.publishTime}}</span>
	  </div>
	  <div class="item span100">
	  	<span class="label">培训内容</span>
	  	<span class="value">{{detailData.trainContent}}</span>
	  </div>
	  <div class="item span100">
		  <span class="label">培训资料</span>
		  <span class="value">
			  <el-table	:data="detailData.trainFiles" stripe>
				  <el-table-column type="index" label="序号" prop="index" align="center" width="60px" ></el-table-column>
				<el-table-column  prop="name"  label="文件名称"  align="left" ></el-table-column>
				<el-table-column  label="操作"  align="center" width="150px">
					<slot slot-scope="scope">
						<i class="icon el-icon-view" @click="viewFile(scope.row.url)" title="预览"></i>
						<i class="icon el-icon-download" @click="download(scope.row.url)" title="下载"></i>
					</slot>
				</el-table-column>
			  </el-table>
		  </span>
	  </div>
	  <fieldset class="fieldset">培训反馈信息</fieldset>
	  <div class="item span100" v-if="detailData.status==2">
	  	<span class="label">培训效果</span>
	  	<span class="value">{{detailData.evalEffectName}}</span>
	  </div>
	  <div class="item span100" v-if="detailData.status==2">
	  	<span class="label">培训反馈描述</span>
	  	<span class="value">{{detailData.recordContent}}</span>
	  </div>
	  <div class="item span100" v-if="detailData.status==2">
		  <span class="label">反馈资料</span>
		  <span class="value">
			  <el-table	:data="detailData.recordFiles" stripe>
			  	<el-table-column type="index" label="序号" prop="index" align="center" width="60px" ></el-table-column>
			  	<el-table-column  prop="name"  label="文件名称"  align="left" ></el-table-column>
			  	<el-table-column  label="操作"  align="center" width="150px">
					<slot slot-scope="scope">
						<i class="icon el-icon-view" @click="viewFile(scope.row.url)" title="预览"></i>
						<i class="icon el-icon-download" @click="download(scope.row.url)" title="下载"></i>
					</slot>
				</el-table-column>
			  </el-table>
		  </span>
	  </div>
	  
	  <div class="item span100">
	  	<span class="label"></span>
	  	<div class="value btn-bar" >
	  		<el-button  type="primary" @click="showDialog=true" v-if="detailData.status==1">培训反馈</el-button>
	  	</div>
	  </div>
	  <el-dialog  title="培训反馈" :visible.sync="showDialog" append-to-body width="550px" modal>
	  	<el-form :inline="false" :model="formData" ref="formData" label-width="80px">
			<el-form-item label="培训效果" prop="evalEffect">
			  <el-radio v-for="item in effectList"  v-model="formData.evalEffect" :label="item.code" :key="item.id">{{item.name}}</el-radio>
			</el-form-item>
	  	  <el-form-item label="反馈描述" prop="recordContent" class="textarea">
	  	    <el-input  type="textarea"   v-model="formData.recordContent" maxlength="200" autosize show-word-limit placeholder="不超过200字"></el-input>
	  	  </el-form-item>
	  	  <el-form-item label="上传附件" prop="trainFiles">
	  	    <el-upload
	  	      action=""
	  		  :auto-upload="false"
	  	      multiple
			  :size="10"
	  		  :on-change="onChange"
	  		  :file-list="formData.recordFiles"
	  		  >
	  	      <el-button size="mini" type="primary">点击上传</el-button>
	  	    </el-upload>
	  	  </el-form-item>
	  	 </el-form>
	  	 <div slot="footer" align="center">
	  		 <el-button @click="onCancel">取 消</el-button>
	  		 <el-button type="primary" @click="onSubmit" :loading="btnLoading">确 定</el-button>
	  	 </div>
	  </el-dialog>
	  
	  <el-image-viewer v-if="showViewer"  :url-list="imgList" :on-close="closeViewr" />
	  <!-- <iframe class="ifm" v-show="showPdfViewer" :src="`/static/landdata/lib/pdfjs/web/viewer.html?file=${pdfUrl}`" frameborder="0"></iframe> -->
		<a ref="downa" href="" download="" style="display: none;"></a>
  </div>
</template>
<script>
	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
	export default{
		components:{ElImageViewer},
		props:{
			rowId:{
			  type:String,
			  default:"",
			  required:true,
			},
			eduStatusList:Array,
			effectList:Array
		},
		data(){
			return{
				detailData:{},
				showDialog:false,
				showViewer:false,
				imgList:[],
				formData:{
					evalEffect:"0",
					recordContent:"",
					recordFiles:[]
				},
				btnLoading:false,
			}
		},
		watch:{
			rowId(){
				this.getDetailData()
			}
		},
		methods:{
			getDetailData(){
				if(!this.rowId){
					return
				}
				this.$http.getTrainById({id:this.rowId})
				.then((res)=>{
					var data=res.data.data ||{}
					data.trainFiles=data.trainFiles.split(",").filter((item)=>{
						return item !=""
					}).map((item)=>{
						return{
							url:item,
							name:item.substring(item.lastIndexOf('/')+1)
						}
					})
					data.recordFiles=data.recordFiles.split(",").filter((item)=>{
						return item !=""
					}).map((item)=>{
						return{
							url:item,
							name:item.substring(item.lastIndexOf('/')+1)
						}
					})
					
					this.eduStatusList.forEach((item)=>{
						if(item.code==data.status){
							data.statusName=item.name
						}
					})
					this.effectList.forEach((item)=>{
						if(item.code==data.evalEffect){
							data.evalEffectName=item.name
						}
					})
					this.detailData = data ||{};
					
				}).catch((err)=>{
					throw(err)
				})
			},
			
			//文件预览
			viewFile(fileUrl,id){
			  if(!fileUrl){
			    this.$message.error('无可查看内容!');
			    return
			   }
			  if(fileUrl.indexOf(".pdf")!=-1){
			    //this.pdfUrl=fileUrl;
			    //this.showPdfViewer=true
				window.open(fileUrl,"_blank ")
			  }else if(fileUrl.indexOf(".png")!=-1 || fileUrl.indexOf(".jpg")!=-1){
			     //window.open(fileUrl,"_blank ")
				 this.showViewer=true
				 this.imgList=[fileUrl]
			  }else {
			    this.$message({
			      message: '暂不支持在线预览,请下载!',
			      type: 'warning'
			    });
			  }
			},
			
			//文件下载
			download(fileUrl,id){
				fileUrl=fileUrl.replace(/^http:\/\/\d+\.\d+\.\d+\.\d+:\d{2,4}/,"");
				var fileName=fileUrl.split("/").reverse()[0];
			  this.$http.downloadFile(fileUrl)
			  .then(res => {
			    let url = window.URL.createObjectURL(new Blob([res]))
			      this.$refs.downa.href=window.URL.createObjectURL(res.data);
			      this.$refs.downa.download=fileName;
			      this.$refs.downa.click()
			  }).catch((err) => {
			      this.$refs.downa.href=window.URL.createObjectURL(err.data)
			      this.$refs.downa.download=fileName;
			      this.$refs.downa.click()
				  throw(err)
			     
			  })
			},
			
			closeViewr(){
				this.showViewer=false
			},
			
			onChange(file, fileList){
				this.formData.recordFiles=fileList
			},
			
			onCancel(){
				this.formData.recordContent=""
				this.formData.recordFiles=[]
				this.showDialog=false
			},
			
			onSubmit(){
				if(this.formData.recordContent==""){
					this.$message.warning("请输入反馈描述!")
					return
				}else if(this.formData.evalEffect===""){
					this.$message.warning("请选择培训效果!")
					return
				}
				var formdata=new FormData;
				formdata.append("id",this.rowId)
				formdata.append("evalEffect",this.formData.evalEffect)
				formdata.append("recordContent",this.formData.recordContent)
				this.formData.recordFiles.forEach((file,index)=>{
					formdata.append("recordFiles"+index,file.raw)
				})
				this.btnLoading=true
				this.$http.editEduEffect(formdata)
				.then((res)=>{
					this.getDetailData()
					this.formData.recordContent=""
					this.formData.recordFiles=[]
					this.formData.evalEffect="0"
					this.showDialog=false;
					this.btnLoading=false
					this.$emit("refresh",1)
				}).catch((err)=>{
					this.btnLoading=false
					throw(err)
				})
			},
			
		},
		created() {
			this.getDetailData()
		}

	}
</script>
<style scoped lang="scss">

.el-radio{
	margin-right: 10px;
}

.icon{
		padding: 5px 10px;
		cursor: pointer;
		&:hover{
			color: #05d7ee;
		}
	}
</style>
